<template>
  <div v-if="tips !== null">
    <ConTertiary />
    <div class="bottom" v-if="tips.length === 0">
      <div class="content">
        <img src="../assets/小人.png" alt="" />
        <div class="text">
          <div class="text-top">您的购物车还是空的！</div>
          <div class="text-bottom">快去购物吧！</div>
        </div>
      </div>
    </div>
    <div class="container-content" v-else>
      <ul>
        <li v-for="item in getFilterTips"  :key="item.id">
          <div class="top">
            <div class="tip-id">订单编号:70081648646035{{ item.orderId }}</div>
            <div class="tip-time">订单时间:{{ item.orderTime }}</div>
          </div>
          <div class="content">
            <el-table
              :cell-style="cellStyle"
              :row-style="rowStyle"
              :header-cell-style="headerStyle"
              ref="multipleTable"
              :data="item.products"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column prop="productPicture" width="150" label="">
                <template slot-scope="scope">
                  <img
                    style="
                       {
                        width: 80px;
                        height: 80px;
                      }
                    "
                    :src="
                      'http://www.codeedu.com.cn/' + scope.row.productPicture
                    "
                    alt=""
                  />
                </template>
              </el-table-column>

              <el-table-column prop="productName" label="商品名称" width="120">
              </el-table-column>
              <el-table-column prop="" label="" width="300"> </el-table-column>
              <el-table-column
                prop="productSellingPrice"
                label="单价"
                width="120"
              >
                <template slot-scope="scope"
                  >{{ scope.row.productSellingPrice }}元
                </template>
              </el-table-column>
              <el-table-column prop="num" label="数量"> </el-table-column>
              <el-table-column prop="total" label="小计">
                <template slot-scope="scope">
                  {{ scope.row.productSellingPrice * scope.row.num }}元
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="bottom-bottom">
            <div class="total-num">
              共<span>{{ getProNum(item.products) }}</span
              >件商品
            </div>
            <div class="total-price">
              <span>合计：</span
              ><span id="total">{{ getProTotal(item.products) }}元</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ConTertiary from "./ConTertiary.vue";
import { getOrder } from "../api/home";
export default {
  name: "NodeMyTips",
  data() {
    return {
      tips: [],
    };
  },
  computed: {
    getProTotal() {
      return function (val) {
        let sum = 0;
        val.forEach((item) => {
          sum += item.productSellingPrice * item.num;
        });
        return sum;
      };
    },
    getProNum() {
      return function (val) {
        let sum = 0;
        val.forEach((item) => {
          sum += item.num;
        });
        return sum;
      };
    },
    getFilterTips(){
      let filterTips =[];
      this.tips.forEach(item => {
        if(item.products.length > 0){
          filterTips.push(item);
        }
      })
      return filterTips;
    }
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      getOrder().then((res) => {
        this.tips = res.data;
      });
    },
    headerStyle({ rowIndex }) {
      if (rowIndex == 0) {
        return {
          height: 82 + "px",
          textAlign: "center",
        };
      }
    },
    rowStyle() {
      return {
        height: 116 + "px",
      };
    },
    cellStyle() {
      return {
        textAlign: "center",
      };
    },
  },
  components: { ConTertiary },
};
</script>

<style lang="scss" scoped>
.bottom {
  width: 100%;
  background: #f5f5f5;
  .content {
    width: 1200px;
    margin: 0 auto;
    padding-top: 46px;
    display: flex;
    img {
      display: block;
      width: 362px;
      height: 362px;
      margin-left: 98px;
    }
    .text {
      margin: 114px 0 0 80px;
      height: 78px;
      color: #b0b0b0;
      .text-top {
        font-size: 36px;
        line-height: 100%;
      }
      .text-bottom {
        margin-top: 24px;
        font-size: 18px;
        line-height: 100%;
      }
    }
  }
}
.container-content {
  width: 100%;
  background: #f5f5f5;
  ul {
    width: 1200px;
    margin: auto;
    padding-top: 24px;
    li {
      width: 100%;
      margin: 16px 0 40px;
      background-color: #fff;
      .top {
        height: 100%;
        display: flex;
        justify-content: space-between;
        height: 60px;
        border-bottom: 1px solid #ff6700;
        .tip-id {
          color: #ff6700;
          font-size: 16px;
          margin: 22px 0 0 28px;
        }
        .tip-time {
          margin: 22px 8px 0 0;
        }
      }
    }
    li:nth-child(1) {
      margin-top: 0px;
    }
  }
}

.bottom-bottom {
  display: flex;
  justify-content: space-between;
  .total-num {
    margin: 15px 0 0 20px;
    span {
      color: #ff6700;
    }
  }
  .total-price {
    margin: 9px 10px;
    top: 4px;
    right: 244px;
    font-size: 32px;
    color: #ff6700;
    span:nth-child(1) {
      line-height: 100%;
      height: 32px;
      font-size: 14px;
    }
  }
}
</style>
